<template>
<!-- options：
    navData:  数据源可循环对象
    currentIndex: 激活项的索引
    currentBgc: 激活下的颜色
    changeIndex: 通过点击改变索引
 -->
  <div class="myNav">
    <nav-item
    v-for="(item, index) of navData"
    :key="index"
    :index="index"
    :name="item.name"
    :currentIndex="currentIndex"
    :currentBgc="currentBgc"
    @changeIndex="changeNavIndex"
    ></nav-item>
  </div>
</template>

<script>
import NavItem from './NavItem.vue'
export default {
  name: 'MyNav',
  components: {
    NavItem,
  },
  props: {
    // 配置的源数据
    navData: Array,
    currentIndex: {
      type: Number,
      default: 0,
    },
    currentBgc: {
      type: String,
      default: 'primary',
    }
  },
  methods: {
    changeNavIndex (index) {
      this.$emit('changeNavIndex', index)
    }
  },
}
</script>

<style lang="scss">
.myNav {
  height: 50px;
  display: flex;
  border-bottom: 1px solid #333;
}
</style>